<template>
  <div id="wdsx">
    <h3 >我的收藏</h3>

    <div>
      <img src="./sp1.jpg" alt="">
<h4>新西兰黄金奇异果</h4>
<p>花蜜般的甘甜百吃不厌</p>
<p><span>¥28.8</span><span class="del">40.00¥</span> </p>
<img  class="gwc" src="./gwc.jpg" alt="">
<span class="ysx">已失效</span>
    </div>
    <div><img src="./sp1.jpg" alt="">
<h4>新西兰黄金奇异果</h4>
<p>花蜜般的甘甜百吃不厌</p>
<p><span>¥28.8</span><span class="del">40.00¥</span> </p>
<img  class="gwc" src="./gwc.jpg" alt="">
<span class="ysx sc">取消收藏</span></div>
    <div><img src="./sp1.jpg" alt="">
<h4>新西兰黄金奇异果</h4>
<p>花蜜般的甘甜百吃不厌</p>
<p><span>¥28.8</span><span class="del">40.00¥</span> </p>
<img  class="gwc" src="./gwc.jpg" alt="">
<span class="ysx sc">取消收藏</span></div>
  </div>
</template>

<script>
export default {
  name: 'wdsx',
};
</script>

<style scoped>
h3{
  width: 1000px;
padding-top: 20px ;
padding-left: 20px ;
  border-bottom: 1px solid #e7e7e7;
  height: 45px;
}
.del{
  text-decoration: line-through;
}
#wdsx{
  margin-left: 30px;
  display: flex;
  flex-wrap: wrap;
  height: 672px;
  width: 1000px;
  border: 1px #e7e7e7 solid;

}
#wdsx div{
  width: 300px;
  height: 475px;
  display: flex;
  flex-direction: column;
  border: 1px #e7e7e7 solid;
  margin: 15px;position: relative;
}
span,p,h4{
margin: 10px;
color: #666;

}
span:nth-child(1){
  font-size: 24px;
  color: red;
  cursor: pointer;
}
span:nth-child(2){
  font-size: 20px;
cursor: pointer;
}
.gwc{
  width: 30px;
  position: absolute;
  bottom: 75px;
  right: 30px;
}
.ysx{
  margin: 0 auto;
  width: 150px;
  height: 40px;
  background: #999;
  color: #fff;
  border-radius: 20px;
  text-align: center;
  align-items: center;
  line-height: 40px;
}
.sc{
  background: #04be02;
}
</style>
